<template>
  <div class="p-6" style="padding-top: 40px">
    <div class="flex justify-center mb-10 mt-2 relative max-w-3xl mx-auto w-full">
      <svg
        class="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500 pointer-events-none"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"
        />
      </svg>
      <input
        type="text"
        placeholder="搜索知识库标题..."
        class="w-full pl-14 px-5 py-3 text-base rounded-lg shadow-sm border border-gray-300 bg-white text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 dark:border-gray-600 dark:ring-0 dark:focus:ring-blue-300 transition"
      />
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 flex-grow">
      <WikiCard v-for="item in knowledgeList" :key="item.id" :data="item" />
    </div>

    <!-- 分页控件 -->
    <div class="mt-6 flex justify-center">
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="pagination.currentPage"
        :pageSize="pagination.pageSize"
        :total="pagination.total"
        @current-change="handlePageChange"
        class="custom-pagination"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'element-plus/dist/index.css'
import { getWikiPage } from '@/apis/blog/wiki'
import WikiCard from './WikiCard.vue'
const currentPage = ref(1)

const handlePageChange = page => {
  currentPage.value = page
  onSearch()
}

const param = ref({
  title: undefined
})
const pagination = reactive({
  total: 10,
  pageSize: 6,
  currentPage: 1
})

async function onSearch() {
  const res = await getWikiPage({
    currentPage: pagination.currentPage,
    pageSize: pagination.pageSize,
    title: param.title
  })
  knowledgeList.value = res.list
  pagination.total = res.total
}
onMounted(async () => {
  onSearch()
})
const knowledgeList = ref([])
</script>
